{extend name="layout/default" /}

{block name="content"}
<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh,add,edit,del')}
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover" 
                           data-operate-edit="{:$auth->check('permissiongroup/edit')}" 
                           data-operate-del="{:$auth->check('permissiongroup/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    var Table;
    $(function () {
        // 初始化表格
        Table = $("#table").bootstrapTable({
            url: '{:url("permissiongroup/index")}',
            pk: 'id',
            sortName: 'id',
            columns: [
                [
                    {field: 'state', checkbox: true},
                    {field: 'id', title: 'ID', operate: 'LIKE'},
                    {field: 'name', title: '{:__("Name")}', operate: 'LIKE'},
                    {field: 'description', title: '{:__("Description")}', operate: 'LIKE'},
                    {field: 'status', title: '{:__("Status")}', searchList: {normal: '{:__("Normal")}', hidden: '{:__("Hidden")}'}},
                    {field: 'operate', title: '{:__("Operate")}', table: Table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                ]
            ]
        });

        // 为表格绑定事件
        Table.api.bindevent(Table);
    });
</script>
{/block} 